<template>
  <div>
    <div class="addBody">
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">项目信息</div>
      </el-form>
      <el-form :inline="true" class="editMessage" ref="form" :model="editProject" label-width="90px">
        <el-form-item label="项目编号:">
          <el-input class="readonlyMessage cityMessage" v-model="editProject.data.project_id" readonly></el-input>
        </el-form-item>
        <span style="position: absolute; margin: 15px 0px 0px 6px; color: red;">*</span>
        <el-form-item label="项目名称:">
          <el-input class="smallMessage" v-model="editProject.data.project_name"></el-input>
        </el-form-item>
        <span style="position: absolute; margin: 15px 0px 0px 21px; color: red;">*</span>
        <el-form-item class="rightMessage" label="客户名称:">
          <el-input class="smallMessage" v-model="editProject.data.clientele"></el-input>
        </el-form-item>
        <el-form-item label="联系人:">
          <el-input class="smallMessage" v-model="editProject.data.contact"></el-input>
        </el-form-item>
        <el-form-item class="rightMessage" label="联系电话:">
          <el-input class="smallMessage" v-model="editProject.data.tel"></el-input>
        </el-form-item>
        <span style="position: absolute; margin: 15px 0px 0px 6px; color: red;">*</span>
        <el-form-item label="项目城市:">
          <div id="app">
            <el-cascader
              class="cityMessage"
              size="large"
              :options="citys"
              clearable
              v-model="theCity"
              @change="handleChange"
              placeholder="省/市/区">
            </el-cascader>
          </div>
        </el-form-item>
        <el-form-item style="height: auto" label="详细地址:">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" class="cityMessage" v-model="editProject.data.project_addr"></el-input>
        </el-form-item>
        <span style="position: absolute; margin: 15px 0px 0px 35px; color: red;">*</span>
        <el-form-item label="坐标:">
          <el-input class="coordinateMessage" v-model="editProject.data.coordinate"></el-input>
          <el-button type="primary" class="export"><a href="http://api.map.baidu.com/lbsapi/getpoint/index.html" target="_blank">点击选择坐标</a></el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline">
        <div class="textTitle">附加信息</div>
      </el-form>
      <el-table :data="gateway" stripe fit highlight-current-row
                style="width: 100%;" :header-cell-style="{background:'#F7F8F9', height:'20px', padding:'5px 0px'}">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="55px"
        >
        </el-table-column>
        <el-table-column
          prop="pid"
          label="站点编号"
          sortable
          min-width="300">
        </el-table-column>
        <el-table-column
          prop="station_name"
          label="站点名称"
          sortable
          min-width="300">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="接入时间"
          min-width="300">
        </el-table-column>
      </el-table>
    </div>
    <el-button type="primary" class="clear"><router-link :to="{path:'/monitor/system/project'}">取消</router-link></el-button>
    <el-button class="indieWidth" type="primary" @click="editThisProject">保存</el-button>
  </div>
</template>

<script>
  import { regionData } from 'element-china-area-data'
  import axios from 'axios'
  export default {
    data() {
      return {
        citys: regionData,
        editMessage: '',
        theCity: [],
        gateway: [],
        options: [{
          value: 'TD1808000005',
          label: 'TD1808000005'
        }, {
          value: 'TD1808000004',
          label: 'TD1808000004'
        }, {
          value: 'TD1808000003',
          label: 'TD1808000003'
        }, {
          value: 'TD1808000002',
          label: 'TD1808000002'
        }, {
          value: 'TD1808000001',
          label: 'TD1808000001'
        }],
        getonce: {
          access_token: localStorage.getItem('access_token'),
          type: 'project_get',
          data: {
            project_id: ''
          }
        },
        editProject: {
          access_token: localStorage.getItem('access_token'),
          type: 'project_mod',
          data: {
            project_id: '',
            order_no: '',
            project_name: '',
            project_city: '',
            project_addr: '',
            clientele: '',
            contact: '',
            tel: '',
            coordinate: '',
            provincial: '',
            urban: '',
            area: '',
            province: '',
            city: ''
          }
        }
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      // 查看信息
      queryData() {
        this.getonce.data.project_id = this.$route.query.id
        // 获取站点列表总览
        axios.post('/pm', this.getonce, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.editProject.data = res.data.data
          this.gateway = res.data.data.stations
          this.theCity = [res.data.data.provincial, res.data.data.urban, res.data.data.area]
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      handleChange() {
        var shen = ''
        var shi = ''
        var qu = ''
        for (var i = 0; i < this.citys.length; i++) {
          if (this.citys[i].value === this.theCity[0]) {
            shen = this.citys[i].label
            this.editProject.data.province = shen
            for (var o = 0; o < this.citys[i].children.length; o++) {
              if (this.citys[i].children[o].value === this.theCity[1]) {
                shi = this.citys[i].children[o].label
                this.editProject.data.city = shi
                for (var p = 0; p < this.citys[i].children[o].children.length; p++) {
                  if (this.citys[i].children[o].children[p].value === this.theCity[2]) {
                    qu = this.citys[i].children[o].children[p].label
                  }
                }
              }
            }
          }
        }
        this.editProject.data.provincial = this.theCity[0]
        this.editProject.data.urban = this.theCity[1]
        this.editProject.data.area = this.theCity[2]
        this.editProject.data.project_city = shen + shi + qu
      },
      // 编辑操作
      editThisProject() {
        if (this.editProject.data.project_name === '') {
          this.$message.error('项目名称不能为空')
        } else if (this.editProject.data.project_name.length > 40) {
          this.$message.error('项目名称长度不能超过40个字段')
        } else {
          if (this.editProject.data.clientele === '') {
            this.$message.error('客户名称不能为空')
          } else if (this.editProject.data.clientele.length > 40) {
            this.$message.error('客户名称长度不能超过40个字段')
          } else {
            if (this.editProject.data.project_city === '') {
              this.$message.error('项目城市不能为空')
            } else {
              if (this.editProject.data.coordinate === '') {
                this.$message.error('项目坐标不能为空')
              } else if (this.editProject.data.project_addr.length > 128) {
                this.$message.error('详细地址长度不能超过128个字段')
              } else {
                axios.post('/pm', this.editProject, {
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  }
                }).then((res) => {
                  this.theCity = ''
                  console.log(res.data.errcode)
                  if (res.data.errcode === '00000') {
                    this.$router.push({
                      path: '/monitor/system/project'
                    })
                  }
                })
                  .catch((error) => {
                    this.$message.error(error.data.errmsg)
                  })
              }
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
  .addBody{
    width: 100%;
    min-height: 500px;
    margin-top: 20px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #E0E0E0;
  }
  /deep/ .editMessage {
    margin: 20px 0px;
    width: 735px;
  }
  /deep/ .el-select > .el-input {
    width: 256px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .el-textarea__inner {
    resize: none;
  }
  /deep/ .smallMessage {
    width: 256px;
  }
  /deep/ .bigMessage {
    width: 500px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .cityMessage {
    width: 631px;
  }
  /deep/ .coordinateMessage {
    width: 530px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 6px;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
    margin-top: 20px;
  }
  /deep/ .el-table--border {
    margin: 20px 0px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
    padding: 4px;
  }
  /deep/ .el-table--border th {
    padding: 3px;
  }
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F7F8F9;
  }
</style>
